<template>
	<view class="container consultation-page">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<view class="left">
				<u-icon name="arrow-left" size="32" color="#333" @click="goBack"></u-icon>
			</view>
			<view class="title">卒中咨询室</view>
			<view class="right">
				<u-icon name="search" size="32" color="#333" @click="handleSearch"></u-icon>
			</view>
		</view>
		
		<!-- 医生列表 -->
		<scroll-view class="doctor-scroll" scroll-y>
			<view class="doctor-container">
				<view class="doctor-item" v-for="(item, index) in doctorList" :key="index" @click="startConsultation(item)">
					<view class="avatar">
						<image :src="item.avatar" mode="aspectFill"></image>
						<view class="status" :class="item.status"></view>
					</view>
					
					<view class="info">
						<view class="name-box">
							<text class="name">{{item.nickName}}</text>
							<text class="title">{{item.title}}</text>
						</view>
						
						<view class="hospital">{{item.hospital}}</view>
						
						<view class="tags">
							<view class="tag" v-for="(tag, tagIndex) in item.tags" :key="tagIndex">
								<text>{{tag}}</text>
							</view>
						</view>
						
						<view class="stats">
							<view class="stat-item">
								<text class="label">咨询量</text>
								<text class="value">{{item.consultCount}}</text>
							</view>
							<view class="stat-item">
								<text class="label">好评率</text>
								<text class="value">{{item.goodRate}}%</text>
							</view>
						</view>
					</view>
					
					<view class="action">
						<view class="btn" :class="{'disabled': item.status === 'offline'}">
							<text>{{item.status === 'online' ? '立即咨询' : '离线'}}</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 底部安全区域，确保内容不被TabBar遮挡 -->
			<view class="safe-bottom-area"></view>
		</scroll-view>
		<!-- 自定义tabBar -->
		<custom-tabbar v-if="showCustomTabBar"></custom-tabbar>
	</view>
</template>

<script>
	import { getDoctorList } from '@/common/api';
	export default {
		data() {
			return {
				roleName: "",
				showCustomTabBar: true, // 显示自定义TabBar
				doctorList: [],
				doctorList: [
					{
						userId: "1917552986976768002",
						nickName: '张医生',
						title: '主任医师',
						hospital: '北京协和医院',
						avatar: '/static/images/doctor1.png',
						status: 'online',
						tags: ['神经内科', '脑卒中', '高血压'],
						consultCount: 1234,
						goodRate: 98
					},
					{
						userId: "1916810752945819649",
						nickName: '李医生',
						title: '副主任医师',
						hospital: '上海华山医院',
						avatar: '/static/images/doctor2.png',
						status: 'online',
						tags: ['神经外科', '脑卒中', '康复治疗'],
						consultCount: 856,
						goodRate: 96
					},
					{
						userId: 3,
						nickName: '王医生',
						title: '主治医师',
						hospital: '广州中山医院',
						avatar: '/static/images/doctor3.png',
						status: 'offline',
						tags: ['神经内科', '脑卒中', '预防保健'],
						consultCount: 567,
						goodRate: 95
					}
				]
			}
		},
		onLoad() {
			// 隐藏原生TabBar
			uni.hideTabBar();
		},
		onShow() {
			console.log("我在这里")
		    // 获取医生list
		    this.getDoctorList();
		    // 获取在线医生list
			// this.getDoctorOnlineList();
			console.log("输出doctor1111");
		},
		methods: {

			goBack() {
				uni.navigateBack()
			},
			handleSearch() {
				uni.showToast({
					title: '搜索功能开发中',
					icon: 'none'
				})
			},
			startConsultation(doctor) {
				if (doctor.status === 'offline') {
					uni.showToast({
						title: '医生当前不在线',
						icon: 'none'
					})
					return
				}
				
				uni.navigateTo({
					url: `/pages/consultation/chat?userId=${doctor.userId}`
				})
			},
			async getDoctorOnlineList(){
				
			},
			async getDoctorList(){
				const app = getApp();
				console.log(app.globalData.userRole)
				if(app.globalData.userRole == "patient"){
					this.roleName = "医护";
				}else if(app.globalData.userRole == "doctor"){
					this.roleName = "患者";
				}
				console.log(this.roleName)
				console.log("456")
				const docRes = await getDoctorList(this.roleName);
				console.log("docRes",docRes)
				console.log("2")
			    // 确保DOM已更新
			    this.doctorList = docRes.data;
			    // 强制更新
				this.$forceUpdate()
			    console.log("输出doctor");
			    console.log(this.doctorList);
			    // this.doctorList = [];
			    console.log("输出doctor");
			    console.log(this.doctorList);
				
				
			}
		}
	}
</script>

<style lang="scss">
	.container.consultation-page {
		min-height: 100vh;
		background-color: #F7F7FA;
		padding-bottom: calc(150rpx + env(safe-area-inset-bottom)) !important;
		
		.nav-bar {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 30rpx;
			background-color: #fff;
			
			.title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
			}
		}
		
		.doctor-scroll {
			height: calc(100vh - 100rpx);
			
			.doctor-container {
				padding: 30rpx;
				
				.doctor-item {
					display: flex;
					background-color: #fff;
					border-radius: 20rpx;
					padding: 30rpx;
					margin-bottom: 30rpx;
					
					&:last-child {
						margin-bottom: 0;
					}
					
					.avatar {
						position: relative;
						width: 120rpx;
						height: 120rpx;
						margin-right: 30rpx;
						
						image {
							width: 100%;
							height: 100%;
							border-radius: 60rpx;
						}
						
						.status {
							position: absolute;
							right: 0;
							bottom: 0;
							width: 20rpx;
							height: 20rpx;
							border-radius: 10rpx;
							border: 4rpx solid #fff;
							
							&.online {
								background-color: #52c41a;
							}
							
							&.offline {
								background-color: #999;
							}
						}
					}
					
					.info {
						flex: 1;
						
						.name-box {
							display: flex;
							align-items: center;
							margin-bottom: 10rpx;
							
							.name {
								font-size: 32rpx;
								font-weight: bold;
								color: #333;
								margin-right: 20rpx;
							}
							
							.title {
								font-size: 24rpx;
								color: #1890FF;
								background-color: #e6f7ff;
								padding: 4rpx 12rpx;
								border-radius: 4rpx;
							}
						}
						
						.hospital {
							font-size: 24rpx;
							color: #666;
							margin-bottom: 20rpx;
						}
						
						.tags {
							display: flex;
							flex-wrap: wrap;
							margin-bottom: 20rpx;
							
							.tag {
								margin-right: 20rpx;
								margin-bottom: 10rpx;
								
								text {
									font-size: 24rpx;
									color: #666;
									background-color: #F7F7FA;
									padding: 4rpx 12rpx;
									border-radius: 4rpx;
								}
							}
						}
						
						.stats {
							display: flex;
							
							.stat-item {
								margin-right: 30rpx;
								
								.label {
									font-size: 24rpx;
									color: #999;
								}
								
								.value {
									font-size: 24rpx;
									color: #333;
									margin-left: 8rpx;
								}
							}
						}
					}
					
					.action {
						display: flex;
						flex-direction: column;
						justify-content: center;
						
						.btn {
							background-color: #1890FF;
							border-radius: 30rpx;
							padding: 10rpx 20rpx;
							
							text {
								font-size: 24rpx;
								color: #fff;
							}
							
							&.disabled {
								background-color: #ddd;
							}
						}
					}
				}
			}
			
			/* 底部安全区域 */
			.safe-bottom-area {
				height: calc(140rpx + env(safe-area-inset-bottom));
			}
		}
	}
</style> 